<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>toggleAttribute</title>
</head>

<body>

    <p>
        <input type="text" value="hello" readonly onclick="toggle1(this)">
    </p>
    <p>
        <input type="text" value="hello" disabled >
        <button onclick="toggle2(this)">启用或禁用</button>
    </p>

    <script type="text/javascript">
        function toggle1( e ){
            console.log( e );
            e.toggleAttribute( 'readonly' );
        }

        function toggle2( e ){
            console.log( e );
            let prevElement = e.previousElementSibling ;
            prevElement.toggleAttribute( 'disabled' );
        }
    </script>

</body>

</html>